<template>
	<div>
		<div>
			<el-input type="text" style="width: 240px" size="large" v-model="customerName" placeholder="请输客户名称"></el-input>

			<DictSelect v-model="customerType" type-name="客户类型" style="width: 200px;"/>
			<el-button :icon="Search" @click="cha()">查询</el-button>
			<el-button type="primary" @click="ShowAdd">添加</el-button>
		</div>
		<el-table :data="tableData" border style="width: 100%" height="440">
			<el-table-column fixed prop="Id" label="Id" width="50" />
			<el-table-column prop="CustomerName" label="客户名称" width="120" />
			<el-table-column prop="CustomerType" label="客户类型" width="150" />
			<el-table-column prop="CustomerTypeName" label="客户类型" width="120" />
			<el-table-column prop="Linkman" label="联络员" width="150" />
			<el-table-column prop="Desc" label="描述" width="120" />
			<el-table-column prop="Tel" label="号码" width="120" />		
			<el-table-column prop="Status" label="状态" width="100">
				<template #default="scope">
					<span style="margin-left: 10px">{{ scope.row.Status==1?"正常":"异常" }}</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" min-width="160">
				<template #default="scope">
					<el-button link type="info" size="small" @click="ShowDetail(scope.row.Id)">明细</el-button>
					<el-button link type="warning" size="small" @click="ShowEdit(scope.row.Id)">编辑</el-button>
					<el-button link type="danger" size="small" @click="Delete(scope.row.Id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div class="demo-pagination-block">
			<el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :page-sizes="[5,10,15,20]"
				:size="size" :disabled="disabled" :background="background"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
	</div>
	
		<el-dialog v-model="dialogAddVisible" title="添加" width="600" draggable>
			<Add @onSave="closeAdd" v-if="dialogAddVisible"></Add>
		</el-dialog>
		<el-dialog v-model="dialogUpdateVisible" title="修改" width="600" draggable>
			<Update :Id=Id @onSave="closeUpdate" v-if="dialogUpdateVisible"></Update>
		</el-dialog>
	
	
</template>

<script lang="ts" setup>	
	import cusapi from '../../api/Customerapi';	
	import { ref, onMounted } from "vue"
	import type { ComponentSize } from 'element-plus'
	import { Search } from '@element-plus/icons-vue'
	import { ElMessageBox, ElNotification } from 'element-plus'
	import DictSelect from '../../components/DictSelect.vue'
	import Add from "./Add.vue"
	import Update from "./Update.vue"
	const Id = ref(0);
	
	
	const customerName = ref("")
	const customerType = ref(null)
	const tableData = ref([])
	const total = ref(0);
	const pageSize = ref(10);
	const pageIndex = ref(1);
	
	const size = ref<ComponentSize>('default')
	const background = ref(false)
	const disabled = ref(false)
	const dialogUpdateVisible = ref(false);
	const dialogAddVisible = ref(false);
	
	enum statusText {
		"正常" = 1,
		"删除" = 0,
		"异常" = -1
	}
		

	
	const getdata = (customerName : string = "", customerType : Number = 0, PageSize : number = 10, PageIndex : number = 1) => {
		var query = {
			customerName: customerName,
			customerType: customerType,
			PageSize: PageSize,
			PageIndex: PageIndex
		}
		cusapi.Query(query).then(res => {
			console.log("usedata=", res);
			tableData.value = res.data
			total.value = res.total;
		}).catch(err => {
			console.log("err=>", err);
		})
	}
	
	const Query = () => {
		pageIndex.value = 1;
		getdata(customerName.value, customerType.value, pageSize.value, pageIndex.value);
	}
	onMounted(() => {
		getdata(customerName.value, customerType.value, pageSize.value, pageIndex.value);
	})
	//显示添加
	const ShowAdd = () => {
		dialogAddVisible.value = !dialogAddVisible.value
	}
	const cha = () => {
		getdata(customerName.value, customerType.value);
	}
	const closeAdd = (flag : boolean) => {
		//关闭弹窗
		dialogAddVisible.value = !dialogAddVisible.value
		//刷新数据
		pageIndex.value = 1;
		getdata(customerName.value, customerType.value, pageSize.value, pageIndex.value);
	}
	const ShowDetail = (Id : number) => {
		console.log("Id=", Id);
	}
	const ShowEdit = (id : number) => {
		console.log("Id=", id);
		Id.value = id;
		dialogUpdateVisible.value = !dialogUpdateVisible.value
	}
	
	const closeUpdate = (flag : boolean) => {
		//关闭弹窗
		dialogUpdateVisible.value = !dialogUpdateVisible.value
		//刷新数据
		pageIndex.value = 1;
		getdata(customerName.value, customerType.value, pageSize.value, pageIndex.value);
	}
	
	const Delete = (Id : number) => {
		console.log("Id=", Id);
		ElMessageBox.confirm("确认删除吗？").then(() => {
			//
			cusapi.del({Id}).then(res => {
				console.log("res=>", res)
				if (res.code == 1) {
					ElNotification({
						title: 'Success',
						message: '删除成功',
						type: 'success',
						duration: 800,
						onClose: () => {
							//emit("onSave", true)
							Query();
						}
					})
				} else {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				}
			}).catch(err => {
	
			})
		}).catch(() => {
	
		})
	}
	
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
		pageSize.value = val;
		pageIndex.value = 1;
		getdata(customerName.value, customerType.value, pageSize.value, pageIndex.value);
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
		pageIndex.value = val;
		getdata(customerName.value, customerType.value, pageSize.value, pageIndex.value);
	}
	// const gg = ref([])
	// custype.customerType().then(res => {
	// 	console.log('11', res);
	// 	gg.value = res.data
	// 	console.log("customerType=", gg.value)
	// })
	
</script>

<style>
</style>